<template>
    <div class="home-reommond">
        <div class="wrapper" ref="wrapper">
            <ul class="content">
                <li v-for="(item,index) in listData" :key="index">
                    <div class="cover">
                        <van-image :src="item.cover"/>
                        <span>{{item.listen_num}}</span>
                    </div>
                    <span>{{item.title}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getSongListData()
    },
    methods:{
        //获取推荐歌单数据
        getSongListData(){
            this.$request('get','/personalized?limit=6')
            .then(res=>{
                console.log(res)
                if(res.result == 100){
                    this.listData = res.data.list;
                }
            })
        }
    }
}
</script>

<style  scoped>
.home-recommond>ul{
    display: flex;
    flex-wrap: wrap;
}
.home-recommond>ul>li{
    width: calc((100% - 1rem) / 3 * 1);
}
.home-recommond>ul>li:nth-of-type(3n+2){
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.cover{
    position:relative;
}
.cover>span{
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: brown;
}
</style>